<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Post layout example - UIkit documentation</title>
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link rel="stylesheet" href="css/uikit.docs.min.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
    </head>

    <body>

        <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">

            <nav class="uk-navbar uk-margin-large-bottom">
                <a class="uk-navbar-brand uk-hidden-small" href="layouts_frontpage.html">Brand</a>
                <ul class="uk-navbar-nav uk-hidden-small">
                    <li>
                        <a href="layouts_frontpage.html">Frontpage</a>
                    </li>
                    <li>
                        <a href="layouts_portfolio.html">Portfolio</a>
                    </li>
                    <li class="uk-active">
                        <a href="layouts_blog.html">Blog</a>
                    </li>
                    <li>
                        <a href="layouts_documentation.html">Documentation</a>
                    </li>
                    <li>
                        <a href="layouts_contact.html">Contact</a>
                    </li>
                    <li>
                        <a href="layouts_login.html">Login</a>
                    </li>
                </ul>
                <a href="#offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
                <div class="uk-navbar-brand uk-navbar-center uk-visible-small">Brand</div>
            </nav>

            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-medium-3-4">

                    <article class="uk-article">

                        <h1 class="uk-article-title">Article Heading</h1>

                        <p class="uk-article-meta">Written by Author on 12 April 2013. Posted in <a href="layouts_blog.html">Blog</a></p>

                        <p><img src="" width="900" height="300" alt=""></p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                        <h2>Subheading</h2>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    </article>

                    <h3 class="uk-h2">Comments (4)</h3>

                    <ul class="uk-comment-list">
                        <li>
                            <article class="uk-comment">
                                <header class="uk-comment-header">
                                    <img class="uk-comment-avatar" width="50" height="50" src="" alt="">
                                    <h4 class="uk-comment-title">Author</h4>
                                    <p class="uk-comment-meta">12 days ago | Profile | #</p>
                                </header>
                                <div class="uk-comment-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi.</div>
                            </article>
                        </li>
                        <li>
                            <article class="uk-comment">
                                <header class="uk-comment-header">
                                    <img class="uk-comment-avatar" width="50" height="50" src="" alt="">
                                    <h4 class="uk-comment-title">Author</h4>
                                    <p class="uk-comment-meta">12 days ago | Profile | #</p>
                                </header>
                                <div class="uk-comment-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi.</div>
                            </article>
                            <ul>
                                <li>
                                    <article class="uk-comment uk-comment-primary">
                                        <header class="uk-comment-header">
                                            <img class="uk-comment-avatar" width="50" height="50" src=" EuMTIxLTguMTEyLDMuMzYyYy0yLjI0MiwyLjI0MS0zLjM2Miw0Ljk0NS0zLjM2Miw4LjExMg0KCQlzMS4xMiw1Ljg3MSwzLjM2Miw4LjExM0MxOS4wNjUsMzEuMzY1LDIxLjc3MSwzMi40ODUsMjQuOTM4LDMyLjQ4NXoiLz4NCjwvZz4NCjwvc3ZnPg0K" alt="">
                                            <h4 class="uk-comment-title">Author</h4>
                                            <p class="uk-comment-meta">12 days ago | Profile | #</p>
                                        </header>
                                        <div class="uk-comment-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi.</div>
                                    </article>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <article class="uk-comment">
                                <header class="uk-comment-header">
                                    <img class="uk-comment-avatar" width="50" height="50" src="" alt="">
                                    <h4 class="uk-comment-title">Author</h4>
                                    <p class="uk-comment-meta">12 days ago | Profile | #</p>
                                </header>
                                <div class="uk-comment-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi.</div>
                            </article>
                        </li>
                    </ul>

                </div>

                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box uk-text-center">
                        <img class="uk-border-circle" width="120" height="120" src="" alt="">
                        <h3>Author Name</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut.</p>
                    </div>
                    <div class="uk-panel">
                        <h3 class="uk-panel-title">Archives</h3>
                        <ul class="uk-list uk-list-line">
                            <li><a href="#">January 2014</a></li>
                            <li><a href="#">December 2013</a></li>
                            <li><a href="#">November 2013</a></li>
                            <li><a href="#">October 2013</a></li>
                            <li><a href="#">September 2013</a></li>
                        </ul>
                    </div>
                    <div class="uk-panel">
                        <h3 class="uk-panel-title">Social Links</h3>
                        <ul class="uk-list">
                            <li><a href="#">GitHub</a></li>
                            <li><a href="#">Twitter</a></li>
                            <li><a href="#">Facebook</a></li>
                        </ul>
                    </div>
                </div>

            </div>

        </div>

        <div id="offcanvas" class="uk-offcanvas">
            <div class="uk-offcanvas-bar">
                <ul class="uk-nav uk-nav-offcanvas">
                    <li>
                        <a href="layouts_frontpage.html">Frontpage</a>
                    </li>
                    <li>
                        <a href="layouts_portfolio.html">Portfolio</a>
                    </li>
                    <li class="uk-active">
                        <a href="layouts_blog.html">Blog</a>
                    </li>
                    <li>
                        <a href="layouts_documentation.html">Documentation</a>
                    </li>
                    <li>
                        <a href="layouts_contact.html">Contact</a>
                    </li>
                    <li>
                        <a href="layouts_login.html">Login</a>
                    </li>
                </ul>
            </div>
        </div>

    </body>
</html>